const app = getApp()

// 创建内部audio上下文 InnerAudioContext 对象
const innerAudioContext = wx.createInnerAudioContext()

Page({
  /**
   * 页面的初始数据
   */
  data: {
    recordInfo: {}, // 作业内容
    // article_content: '', // 文章详情
    articleDetail: '', // 文章详情
    article_text: '', // 文章内容
    switchFlag: false, // 音频文件自动续播开关标识（false关闭，true开启）
    audioFlag: false, // 音频文件播放标识（false关闭，true开启）
    timer: null, // 音频文件播放时间计时器
    sliderNow: 0, // slider进度条当前进度（slider进度值必须为Number），用来控制音频文件播放位置
    sliderMax: 100, // slider进度条最大值
    playNow: 0, // 音频文件当前播放时间（单位：秒）
    playTimeNow: '00:00', // 音频文件实时播放时间（分钟：秒数），用于页面显示
    duration: '', // 音频文件的总时长（单位：秒）
    durationTime: '', // 音频文件的总时长（分：秒），用于页面显示
    scale: '', // slider滑动条总长度与音频总时长的比例
    fontSetSize: 'small', // 用户设置的字体大小（'small'：小，'middle'：中，'large'：大）
    // "复制按钮"拖拽参数
    writePosition: [15, 60], //默认定位参数
    writesize: [0, 0], // X Y 定位
    window: [0, 0], // 屏幕尺寸
    write: [0, 0], // 定位参数
  },

  // 获取用户的作业详情（已完成作业再回到该页面的时候）
  getUserExperience () {
    let token = wx.getStorageSync('token')
    let study_id = this.data.study_id
    app.http({
      config: {
        url: '/api/User/my_study_info',
        data: {
          token,
          study_id
        },
        method: 'POST'
      },
      isAuth: true
    }).then(res => {
      console.log(res, 'userExperienceRes')

      let recordInfo = res.data.data
      // let article_content = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + recordInfo.article.article_content.replace(/\r\n/g,"\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")
      let duration = Number(recordInfo.playtime) // 音频总时长（单位：秒）
      let durationTime = this.timeFormatter(duration) // 音频总时长（分：秒），用于页面显示
      let scale = this.data.sliderMax / duration // slider滑动条总长度与音频总时长的比例
      let article_id = recordInfo.article.id
      // console.log('articleDetail', articleDetail)
      // console.log('duration', duration)
      // console.log('durationTime', durationTime)
      // console.log('scale', scale)
      this.setData({
        recordInfo,
        // article_content,
        article_id,
        duration,
        durationTime,
        scale,
      })

      this.getArticleDetails()

      // 设置audio的资源地址
      innerAudioContext.src = res.data.data.study_url
      
    }).catch(err => {
      console.log(err, 'userExperienceErr')  
    })
  },

  /**
   * 获取文章详情
   */
  getArticleDetails () {
    let token = wx.getStorageSync('token')
    let article_id = this.data.article_id
    app.http({
      config: {
        url: '/api/User/article_info',
        data: {
          token,
          article_id
        },
        method: 'POST'
      },
      isAuth: false
    }).then(res => {
      console.log(res, 'articleDetailRes')
      let articleDetail = res.data.data
      // let article_text = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + articleDetail.text.replace(/\r\n/g,"\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")
      let article_text =  articleDetail.text;
      this.setData({
        articleDetail,
        article_text
      })
    }).catch(err => {
      console.log(err, 'articleDetailErr')
    })
  },

  /**
   * 删除我的录音心得
   */
  handleDeleteRecord () {
    let token = wx.getStorageSync('token')
    let study_id = this.data.study_id
    app.http({
      config: {
        url: '/api/User/study_del',
        data: {
          token,
          study_id
        },
        method: 'POST'
      },
      isAuth: true
    }).then(res => {
      console.log(res, 'deleteRes')
      wx.showToast({
        icon: 'success',
        title: res.data.message
      })
      let timer = setTimeout(() => {
        wx.hideToast()
        wx.navigateBack({
          delta: 2,
        })
        clearTimeout(timer)
      }, 1500)
    }).catch(err => {
      console.log(err, 'deleteErr')
      wx.showToast({
        icon: 'none',
        title: res.data.message
      })
      let timer = setTimeout(() => {
        wx.hideToast()
        clearTimeout(timer)
      }, 1500)
    })
  },

  /**
   * 自动续播功能开启/关闭
   * @param {*} e 
   */
  handleChangeSwitch(e) {
    this.setData({
      switchFlag: e.detail.value
    })
  },

  /**
   * 用户拖动slider进度条，修改音频文件播放进度
   * @param {slider进度条当前进度值} e 
   */
  handleChangeSlider (e) {
    console.log("slider发生change事件，携带值为", e.detail.value)
    let playNow = e.detail.value / this.data.scale // 滑动条当前进度对应的音频播放时间
    let playTimeNow = this.timeFormatter(playNow) // 音频文件实时播放时间（分钟：秒数），用于页面显示
    this.setData({
      sliderNow: e.detail.value,
      playNow,
      playTimeNow
    })
    clearInterval(this.data.timer)
  },

  /**
   * 用户点击slider进度条，修改音频文件播放进度
   * @param {slider进度条当前进度值} e 
   */
  handleChangeSliderEnd (e) {
    console.log("slider发生change事件，携带值为", e.detail.value)
    let playNow = e.detail.value / this.data.scale // 滑动条当前进度对应的音频播放时间
    let playTimeNow = this.timeFormatter(playNow) // 音频文件实时播放时间（分钟：秒数），用于页面显示
    this.setData({
      sliderNow: e.detail.value,
      playNow,
      playTimeNow
    })
    this.playOrPauseAudio(playNow)
  },

  /**
   * 音频播放/暂停
   * @param {音频跳转的位置（单位：秒）} parameter 
   */
  playOrPauseAudio (parameter) {
    let _this = this

    if (_this.data.sliderNow < 100) {
      // 判断，当前音频文件播放图标为暂停状态并且用户没有修改slider滑动条进度
      if (!_this.data.audioFlag && ((typeof parameter) === 'object')) {

        // 将当前音频文件播放图标为修改为播放状态
        _this.setData({
          audioFlag: true
        })

        // 播放音频文件
        innerAudioContext.play()
          
        // 修改slider滑动条进度跟随音频播放进度，修改slider滑动条左侧音频播放时间跟随音频播放进度（分：秒）
        _this.audioPlayProgress()

      } else if (!_this.data.audioFlag && ((typeof parameter) === 'number')) { // 判断，当前音频文件播放图标为暂停状态并且用户修改了slider滑动条进度

        // 音频跳转到指定位置
        innerAudioContext.seek(parameter)

      } else if (_this.data.audioFlag && ((typeof parameter) === 'number')) { // 判断，当前音频文件播放图标为播放状态并且用户修改了slider滑动条进度

        // 音频跳转到指定位置
        innerAudioContext.seek(parameter)

      } else {

        // 将当前音频文件播放图标为修改为暂停状态
        _this.setData({
          audioFlag: false
        })
        
        // 清除定时器
        clearInterval(_this.data.timer)

        // 暂停音频播放
        innerAudioContext.pause()
      }
    } else {
      // 将当前音频文件播放图标为修改为播放状态
      _this.setData({
        audioFlag: true
      })

      // 音频跳转到指定位置
      innerAudioContext.seek(0)

    }
  },

  /**
   * 修改slider滑动条进度跟随音频播放进度，修改slider滑动条左侧音频播放时间跟随音频播放进度（分：秒）
   */
  audioPlayProgress () {
    let _this = this

    // 使用定时器前最好先清除一下定时器
    clearInterval(_this.data.timer);

    _this.data.timer = setInterval(()=> {

      // 当前音频的播放位置（单位 s）
      let currentTime = innerAudioContext.currentTime

      // 音频缓冲的时间点，仅保证当前播放时间点到此时间点内容已缓冲（只读）
      let buffered = innerAudioContext.buffered

      // 判断，当音频缓冲的时间点大于或等于当前音频的播放位置，执行以下操作
      if (buffered >= currentTime) {

        // 当前音频的播放位置（单位：秒）
        let playNow = Math.round(currentTime)

        // 当前音频的播放时间（分：秒），用于页面显示
        let playTimeNow = _this.timeFormatter(currentTime)

        // 让滑动条跟随音频播放进度滑动
        let sliderNow = Math.round(playNow * _this.data.scale)

        this.setData({
          playNow,
          playTimeNow,
          sliderNow
        })
      }
    }, 200)
  },

  /**
   * 将秒数转换成“分钟：秒数”的格式
   * @param {时间（秒数）} duration 
   */
  timeFormatter(duration) {

    let secondTime = Math.floor(duration); // 秒

    let minuteTime = 0; // 分

    if (secondTime > 60) {

      // 获取分钟，除以60取整数，得到整数分钟
      minuteTime = parseInt(secondTime / 60);

      // 获取秒数，秒数取佘，得到整数秒数
      secondTime = parseInt(secondTime % 60);

    }
    let result = secondTime > 9 ? secondTime : ('0' + secondTime);
    if (minuteTime > 0) {
      result = (minuteTime > 9 ? minuteTime : ('0' + minuteTime)) + ":" + result;
    } else {
      result = "00" + ":" + result;
    }
    return result;
  },

  /**
   * 关闭文章内容弹窗
   */
  handleClosePopup () {
    this.setData({
      showPopup: false
    })
  },

  /**
   * 打开文章内容弹窗
   */
  handleOpenPopup () {
    this.setData({
      showPopup: true
    })
  },

  /**
   * 打开文章内容弹窗后禁止下面页面滚动
   */
  doNotScroll () {},

  /**
   * 计算默认定位值 
   */ 
  getSysdata () {
    let that = this
    wx.getSystemInfo({
      success (e) {
        let window = [e.windowWidth, e.windowHeight]
        let write = []
        write[0] = that.data.writePosition[0]
        write[1] = that.data.writePosition[1]
        // console.log('write', write)
        that.setData({
          window,
          write,
        }, function () {
          // 获取元素宽高
          wx.createSelectorQuery().select('.open-popup').boundingClientRect(function (res) {
            // console.log(res.width)
            // console.log(res.height)
            let writesize = [res.width, res.height]
            that.setData({
              writesize
            })
          }).exec()
        })
      },
      fail (e) {
        console.log(e)
      }
    })
  },

  /**
   * 开始拖拽 
   */  
  touchmove (e) {
    let that = this
    let positionRight = 0
    if (e.touches[0].clientX < (that.data.writesize[0] / 2)) {
      positionRight = that.data.window[0] - that.data.writesize[0] - 1
    } else {
      if (e.touches[0].clientX > (that.data.window[0] - that.data.writesize[0] / 2)) {
        positionRight = 0
      } else {
        positionRight = that.data.window[0] - e.touches[0].clientX - that.data.writesize[0] / 2
      }
    }
    let positionBottom = 0
    if (e.touches[0].clientY < (that.data.writesize[1] / 2)) {
      positionBottom = that.data.window[1] - that.data.writesize[1]
    } else {
      if (e.touches[0].clientY > (that.data.window[1] - that.data.writesize[1] / 2)) {
        positionBottom = 0
      } else {
        positionBottom = that.data.window[1] - e.touches[0].clientY - that.data.writesize[1] / 2
      }
    }
    let position = [positionRight, positionBottom]
    that.setData({
      write: position
    })
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let _this = this
    let study_id = options.study_id
    this.setData({
      study_id
    })

    // 在页面中定义"复制原文"按钮位置
    this.getSysdata()

    this.getUserExperience()

    // 监听音频播放事件
    innerAudioContext.onPlay(() => {
      this.setData({
        audioFlag: true
      })
      this.audioPlayProgress()
    })

    // 监听，音频完成跳转
    innerAudioContext.onSeeked(() => {
      if (!this.data.audioFlag && ((typeof this.data.playNow) === 'number')) {

        // 暂停音频播放
        innerAudioContext.pause()

      } else {

        // 播放音频文件
        innerAudioContext.play()

        // 修改slider滑动条进度跟随音频播放进度，修改slider滑动条左侧音频播放时间跟随音频播放进度（分：秒）
        this.audioPlayProgress()
      }
    })

    // 监听，音频播放结束
    innerAudioContext.onEnded((res) => { 
      clearInterval(_this.data.timer)
      _this.setData({
        audioFlag: false,
        sliderNow: 100,
        playNow: _this.data.playTimeNow
      })

      // 判断，用户开启循环播放，继续执行播放方法
      if (_this.data.switchFlag) {
        _this.playOrPauseAudio()
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let fontSetSize = wx.getStorageSync('fontSetSize') // 本地缓存中用户设置的字体大小
    if (fontSetSize) {
      this.setData({
        fontSetSize
      })
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    clearInterval(this.data.timer)
    innerAudioContext.pause()
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})